<template>
  <div class="goodsSaleRankings">
    <div class="goodsSaleRankings-top">
      <van-row >
        <van-col span="8">
          <van-button  style="width:100%;background: #F7F7F7;border-radius: 0!important;" @click="timePopup=true">{{headerTime}}<i class="iconfont icon-xia"></i></van-button>
        </van-col>
        <van-col span="8">
          <van-button  style="width:100%;background: #F7F7F7;border-radius: 0!important;" @click="sortShow=true">店仓<i class="iconfont icon-xia"></i></van-button>
        </van-col>
        <van-col span="8">
          <van-button  style="width:100%;background: #F7F7F7;border-radius: 0!important;" @click="sortShows=true">排序<i class="iconfont icon-xia"></i></van-button>
        </van-col>
      </van-row>
    </div>

    <div class="goodsSaleRankings-content">
      <!--滚动加载-->
      <van-list
        v-model="loading"
        :finished="finished"
        @load="getData"
      >
        <!--{{goodsList[0].title}}-->
        <div v-if="typeof goodsSalesList=='string'" style="color:#ddd;padding:20px 0;background: #fff!important;">{{goodsSalesList}}</div>
        <!--sell_price-->
        <div v-else v-for="(items,idx) in goodsSalesList" :key="idx" style="margin:5px 0;background: #fff!important;">
          <div v-if="items.sell_price<1" style="position: relative">
            <van-row  style="padding:8px 0;">
              <van-col span="6" style="padding:3px 10px;">
                <img v-if="backzhi(items.sku_id).images==0" class="listImg"  src="../../images/noimg.jpg" alt="">
                <img v-else class="listImg" :src="memberDetails.imgaes+backzhi(items.sku_id).images" alt="">
              </van-col>
              <van-col span="18" style="padding:0 10px;">
                <van-row style="text-align: left">
                  <van-col span="24" style="padding:3px 0;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;font-weight: bold!important;color:#000!important;">
                    商品: <span>
                    {{backzhi(items.sku_id).title}}
                  </span>
                  </van-col >
                  <van-col span="24" style="padding:3px 0;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
                    规格:【<span v-for="(val,key,index) in backzhi(items.sku_id).spec_data" :keyd="index"> {{key}}:{{val}}</span>】
                  </van-col>
                  <van-col span="14" style="padding:3px 0;">
                    货号:{{backzhi(items.sku_id).sn}}
                  </van-col>
                  <van-col span="10" style="padding:3px 0;">
                    价格:
                    <span :style="{color:color}">
                  {{backzhi(items.sku_id).price}}
                </span>
                  </van-col>
                </van-row>
              </van-col>
              <van-col span="24" style="padding:3px 0;">
                <van-row>
                  <van-col span="6" style="font-weight: bold;" :style="{color:color}">
                    <!--排名: <span :style="{color:color}">{{idx+1}}</span>-->
                    <img v-if="idx==0" src="../../images/one.png" class="pmimg" alt="">
                    <img v-else-if="idx==1" src="../../images/tow.png" class="pmimg" alt="">
                    <img v-else-if="idx==2" src="../../images/threen.png" class="pmimg" alt="">
                    <span v-else>{{idx+1}}</span>
                  </van-col>
                  <van-col span="6">
                    销售:<span :style="{color:color}">{{Math.abs(items.buynum)}}</span>
                  </van-col>
                  <van-col span="6">
                    金额:<span :style="{color:color}">{{items.jinE}}</span>
                  </van-col>
                  <van-col span="6">
                    折扣:<span :style="{color:color}">
                {{items.zheKou}}
              </span>
                  </van-col>
                </van-row>
              </van-col>
            </van-row>
            <span class="goodsSaleRankings-tuiHuo">已退货</span>
          </div>

          <div v-else >
            <van-row  style="padding:8px 0;">
              <van-col span="6" style="padding:3px 10px;">
                <img v-if="backzhi(items.sku_id).images==0" class="listImg" src="../../images/noimg.jpg" alt="">
                <img v-else class="listImg" :src="memberDetails.imgaes+backzhi(items.sku_id).images" alt="">
              </van-col>
              <van-col span="18" style="padding:0 10px;">
                <van-row style="text-align: left">
                  <van-col span="24" style="padding:3px 0;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;font-weight: bold!important;color:#000!important;">
                    商品: <span >{{backzhi(items.sku_id).title}}</span>
                  </van-col >
                  <van-col span="24" style="padding:3px 0;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
                    规格:【<span v-for="(val,key,index) in backzhi(items.sku_id).spec_data" :keyd="index"> {{key}}:{{val}}</span>】
                  </van-col>
                  <van-col span="12" style="padding:3px 0;">
                    货号:{{backzhi(items.sku_id).sn?backzhi(items.sku_id).sn:'暂无货号'}}
                  </van-col>
                  <van-col span="12" style="padding:3px 0;">
                    价格:
                    <span :style="{color:color}">
                  {{backzhi(items.sku_id).price}}
                </span>
                  </van-col>
                </van-row>
              </van-col>
              <van-col span="24" style="padding:3px 0;">
                <van-row>
                  <van-col span="6" style="font-weight: bold;" :style="{color:color}">
                    <!--排名: <span :style="{color:color}">{{idx+1}}</span>-->
                    <img v-if="idx==0" src="../../images/one.png" class="pmimg" alt="">
                    <img v-else-if="idx==1" src="../../images/tow.png" class="pmimg" alt="">
                    <img v-else-if="idx==2" src="../../images/threen.png" class="pmimg" alt="">
                    <span v-else>{{idx+1}}</span>
                  </van-col>
                  <van-col span="6">
                    销售:<span :style="{color:color}">{{Math.abs(items.buynum)}}</span>
                  </van-col>
                  <van-col span="6">
                    金额:<span :style="{color:color}">{{items.jinE}}</span>
                  </van-col>
                  <van-col span="6">
                    折扣:<span :style="{color:color}">
                {{items.zheKou}}
              </span>
                  </van-col>
                </van-row>
              </van-col>
            </van-row>
          </div>
        </div>
        <van-row :style="{display:noData}" class="noDatas">
          <van-col span="24">数据已加载完</van-col>
        </van-row>
      </van-list>


    </div>

    <!--时间弹出层-->
    <van-popup v-model="timePopup" @click-overlay="timeRadio=timeRadioPrev"  class="timeMask">
      <div style="overflow: scroll;height:80%;">
        <van-radio-group v-model="timeRadio">
          <van-cell-group>
            <van-cell v-for="(val,keys) in selects" :title="val.name" :key="keys" clickable @click="timeCheckFn(val.type,val.name)">
              <van-radio :name="val.type" />
            </van-cell>

            <van-cell title="自定义时间段" clickable @click="timeRadio = '',timeDate=true,headerTime='自定义'">
              <van-radio name="" />
            </van-cell>
          </van-cell-group>
        </van-radio-group>
      </div>
      <!--按钮-->
      <van-row style="padding:10px 0;">
        <van-col span="12" style="padding:0 10px;">
          <van-button class="maskBtn"   @click="timeRadio=timeRadioPrev,timePopup=false,headerTime = headerTimeprev">取消</van-button>
        </van-col>
        <van-col span="12" style="padding:0 10px;">
          <van-button  type="primary" class="maskBtn"  @click="getTsList">确定</van-button>
        </van-col>
      </van-row>
    </van-popup>

    <!--自定义天数弹出层-->
    <van-popup v-model="timeDate" @click-overlay="timeSlotResult=''" :overlay="true" class="zdyMask" >

      <van-cell-group>
        <van-cell title="开始时间" style="border-bottom:0!important;" is-link :value="startCurrentDate" @click="startTimes=true"/>
      </van-cell-group>
      <van-cell-group style="margin-bottom:10px;">
        <van-cell title="结束时间" is-link :value="EndCurrentDate" @click="endTimes=true"/>
      </van-cell-group>
      <!--按钮-->
      <van-row >
        <van-col span="12" style="padding:0 10px">
          <van-button  class="maskBtn"  @click="timeDate=false,timeSlotResult=''">取消</van-button>
        </van-col>
        <van-col span="12" style="padding:0 10px">
          <van-button  type="primary" class="maskBtn" @click="getTimeDate">确定</van-button>
        </van-col>
      </van-row>
    </van-popup>

    <!--开始时间的弹出层-->
    <van-popup v-model="startTimes" class="stimeMask" style="">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        :min-date="minDate"
        @confirm="startTimeFn"
        @cancel="startTimes=false"
      />
    </van-popup>

    <!--结束时间的弹出层-->
    <van-popup v-model="endTimes" class="stimeMask">
      <van-datetime-picker
        v-model="endCurrentDates"
        type="date"
        :min-date="minDate"
        @confirm="endTimeFn"
        @cancel="endTimes=false"
      />
    </van-popup>

    <!--店仓弹层-->
    <van-popup v-model="sortShow" @click-overlay="storeIds=storeIdsPrev" :overlay="true" class="dcMask" style="">

      <div style="overflow: scroll;height:88%;border-bottom:1px solid #ddd;">
        <!--stores-->
        <div v-if="stores.length==0" style="color:#ddd;padding:10px 0;">暂无店仓</div>
        <van-checkbox-group v-else v-model="storeIds">
          <van-cell-group>
            <van-cell v-for="(item,index) in stores" :title="item.name" :key="index" clickable>
              <van-checkbox :name="item.id" />
            </van-cell>
          </van-cell-group>
        </van-checkbox-group>
      </div>
      <!--按钮-->
      <van-row style="padding:10px 0;">
        <van-col span="8" style="padding:0 10px;">
          <van-button  class="maskBtn"  @click="storeIds=[]">重置</van-button>
        </van-col>
        <van-col span="8" style="padding:0 10px;">
          <van-button  class="maskBtn"  @click="storeIds=storeIdsPrev,sortShow=false">取消</van-button>
        </van-col>
        <van-col span="8" style="padding:0 10px;">
          <van-button  type="primary" class="maskBtn"  @click="getSortFn">确定</van-button>
        </van-col>
      </van-row>
    </van-popup>

    <!--排序弹层-->
    <van-popup v-model="sortShows"  @click-overlay="sortResults=sortResultsPrev" :overlay="true" class="paixuMask" style="">

      <div style="overflow: scroll;height:80%;padding-top:10px;">
        <van-radio-group v-model="sortResults">
          <van-cell-group>
            <van-cell title="按金额" clickable @click="sortResults = '0'">
              <van-radio name="0" />
            </van-cell>
            <van-cell title="按数量" clickable @click="sortResults = '1'">
              <van-radio name="1" />
            </van-cell>
          </van-cell-group>
        </van-radio-group>
      </div>
      <!--按钮-->
      <van-row style="padding:10px 0;">
        <van-col span="12" style="padding:0 10px;">
          <van-button  class="maskBtn"  @click="sortResults=sortResultsPrev,sortShows=false">取消</van-button>
        </van-col>
        <van-col span="12" style="padding:0 10px;">
          <van-button  type="primary" class="maskBtn"  @click="getPaiXu">确定</van-button>
        </van-col>
      </van-row>
    </van-popup>

    <!--返回按钮-->
    <backs></backs>

  </div>
</template>

<script>
  import { mapState } from 'vuex';
  import backs from "@/components/menu/backPrev";
  export default {
    name: "goodsSaleRankings",
    computed: {
      ...mapState({
        memberDetails:"data"
      })
    },
    components: {
      backs
    },
    data(){
      return {
        color:'#0D90EB',
        headerTime:'今日',
        headerTimeprev:'今日',
        noData:"none",
        goodsSalesList:[],//商品销售信息汇总
        goodsList:[],//对应的商品信息
        timePopup:false,
        timeRadio:'today',
        timeRadioPrev:"today",//记录上一次的选项
        selects:[
          {name:"今日",type:"today"},
          {name:"昨日",type:"yesterday"},
          {name:"本周",type:"thisWeek"},
          {name:"上周",type:"lastWeek"},
          {name:"本月",type:"thisMonth"},
          {name:"上月",type:"lastMonth"}
        ],
        //时间弹层
        timeDate:false,
        timeSlotResult:'',
        startCurrentDate:'',//开始时间
        EndCurrentDate:'',//结束时间

        //开始时间的弹层
        startTimes:false,
        minHour: 10,
        maxHour: 20,
        minDate: new Date(1900,1,1),
        maxDate: new Date(2050,12,31),
        currentDate: {},//当前时间

        //结束时间的弹层
        endTimes:false,
        endCurrentDates:{},//最终的结束时间

        //店仓弹层
        sortShow:false,
        stores:[],
        storeIds:[],
        storeIdsPrev:[],//记录上一次的选项
        sortResult:'0',//排序值

        //排序弹层
        sortShows:false,
        sortResults:"0",
        sortResultsPrev:"0",

        //滚动加载
        list: [],
        loading: false,
        finished: false,

        //分页
        currentPage:1,//当前页
        pageSize:10,
        total:0,
        pageAll:0,//总页数


      }
    },
    methods:{
      timeCheckFn(type,name){
        this.timeRadio = type
        this.headerTime = name;
      },
      //点击时间确定按钮
      getTsList(){
        this.noData = "none";
        this.timePopup=false;
        this.headerTimeprev =this.headerTime
        this.timeRadioPrev=this.timeRadio;
        this.finished=false;//让滚动可执行加载
        this.goodsSalesList=[];
        this.goodsList=[];
        this.currentPage=1;
        this.loading=true;
        this.getData();
      },
      getTimeDate(){
        this.timeDate=false;
      },
      //点击开始时间的确定按钮
      startTimeFn(){
        this.startTimes=false;
        var y = this.currentDate.getFullYear();
        var m = this.currentDate.getMonth() + 1;
        m = m < 10 ? '0' + m : m;
        var d = this.currentDate.getDate();
        d = d < 10 ? ('0' + d) : d;
        this.startCurrentDate=y+"-"+m+"-"+d;

      },
      //点击结束时间的确定按钮
      endTimeFn(){
        this.endTimes=false;
        var y = this.endCurrentDates.getFullYear();
        var m = this.endCurrentDates.getMonth() + 1;
        m = m < 10 ? '0' + m : m;
        var d = this.endCurrentDates.getDate();
        d = d < 10 ? ('0' + d) : d;
        this.EndCurrentDate=y+"-"+m+"-"+d;
      },
      //初始化时间值
      nowTime(){
        //获取开始时间
        var myDate = new Date();
        var mytime=myDate.getMonth();
        var y=myDate.getFullYear();
        var t=myDate.getDate();        //获取当前日(1-31)

        this.currentDate=new Date(y,mytime,"01");
        this.endCurrentDates=new Date(y,mytime,t);
        var m;
        if(mytime+1<10){
          m="0"+(mytime+1);
        }else{
          m=mytime+1;
        }
        //默认赋值
        this.startCurrentDate=y+"-"+m+"-01";
        this.EndCurrentDate=y+"-"+m+"-"+t;


      },
      //点击店仓中的确定按钮
      getSortFn(){
        this.sortShow=false;
        this.storeIdsPrev=this.storeIds;
        this.noData = "none";
        this.finished=false;//让滚动可执行加载
        this.goodsSalesList=[];
        this.goodsList=[];
        this.currentPage=1;
        this.loading=true;
        this.getData();
      },
      //点击排序的确定按钮
      getPaiXu(){
        this.sortShows=false;
        this.sortResultsPrev=this.sortResults;//记录值
        this.noData = "none";
        this.finished=false;//让滚动可执行加载
        this.goodsSalesList=[];
        this.goodsList=[];
        this.currentPage=1;
        this.loading=true;
        this.getData();
      },
      //获取所有店仓
      getDianCang(){
        var $this=this;
        this.$http.setting.get('store')
          .then(function (response) {
            // $this.stores=response.data.data;
            var empId = localStorage.getItem('empId');
            if(empId && response.data.code){
              $this.$toast.fail('店仓'+response.data.message);
              $this.$router.go(-1)
              return;
            }
            // console.log(response.data);
            // 过滤直营店
            for(var i = 0;i<response.data.data.length;i++){
              // if(response.data.data[i].type != 1){
              //   $this.stores.push(response.data.data[i])
              // }
              $this.stores.push(response.data.data[i])
              // $this.stores=response.data.data.length>0?response.data.data:[];
            }
          })
          .catch(function (error) {
            $this.$toast.fail('登陆过期，请重新登陆');
            console.log(error);
          });
      },
      //获取商品排行记录
      getData(){
        var $this=this;
        this.$http.order.post('/saleTable/goodssaletop',{
          page:$this.currentPage,
          pageSize:$this.pageSize,
          start_time:$this.startCurrentDate,
          end_time:$this.EndCurrentDate,
          order_by:$this.sortResults,
          date_type:$this.timeRadio,
          store_id:$this.storeIds
        })
          .then(function (response) {
            // console.log(response.data.data);
            $this.currentPage=response.data.data.paginate.current_page+1;

            $this.getGoodsList(response.data.data.ids);
            for (let i = 0; i < response.data.data.paginate.data.length; i++) {
              // stores
              //换算单位
              if(response.data.data.paginate.data[i].should_income>10000){
                response.data.data.paginate.data[i].jinE=(response.data.data.paginate.data[i].should_income/10000).toFixed(2)+"万";
              }else{
                response.data.data.paginate.data[i].jinE=response.data.data.paginate.data[i].should_income;
              }

              var obj = response.data.data.paginate.data[i];
              // var dj = $this.backzhi(obj.sku_id)
              // console.log(dj)
              //计算折扣
              if (obj.should_income.indexOf('-')==0){
                obj.zheKou=0
              }else if(obj.should_income==0||obj.sell_price==0){
                obj.zheKou=0
              }else{
                obj.zheKou = (obj.should_income / parseFloat(obj.sell_price) * 10).toFixed(1)
                // obj.zheKou=(obj.should_income/obj.sell_price*10).toFixed(1)
              }
              // console.log(obj.zheKou)
              $this.goodsSalesList.push(obj);
            }
            // console.log($this.goodsSalesList)
            $this.loading = false;

            if(!response.data.data.paginate.data.length){
              $this.finished = true;
              $this.goodsSalesList="未找到相关数据";
            } else if ($this.goodsSalesList.length>= response.data.data.paginate.total) {
              $this.finished = true;
              $this.noData = 'block';
            }


          })
          .catch(function (error) {
            $this.$toast.fail('登陆过期，请重新登陆');
            console.log(error);
          });
      },
      //通过商品id返回对应的值
      backzhi(skuId){

        var name=this.goodsList.filter(i=>i.id==skuId);
        // console.log(name);
        if(name.length){
          if(!name[0].images.length){
             name[0].images=0;
          }
          return name[0];

        }
        return {
          images:"",
          title:"",
          goods:{
            title:""
          },
          spec_data:[],
          sn:"",
          price:"",
        }

      },
      //通过商品id，获取对应的商品
      getGoodsList(list){
        var $this=this;
        this.$http.item.get('item/search',{
          params:{
            store_ids:$this.storeIds,
            item_ids:list
          }
        })
          .then(function (response) {
            if(!response.data.data.data.length){
              $this.goodsList.push({
                images:"",
                title:"",
                goods:{
                  title:""
                },
                spec_data:[],
                sn:"",
                price:""
              });
            }
            // console.log(response.data.data.data);
            for(var i=0;i<response.data.data.data.length;i++){
              $this.goodsList.push(response.data.data.data[i]);
            }
            // console.log($this.goodsList);

          })
          .catch(function (error) {
            console.log(error);
          });
      }
    },
    mounted(){
      this.getDianCang();
      this.nowTime();
      // this.getData();
    }
  }
</script>

<style scoped>
  .goodsSaleRankings{
    font-size:14px;
    color:#666;
  }
  /*弹出层的边框*/
  .goodsSaleRankings .van-cell{
    border-bottom:1px solid #e5e5e5;
  }
  .goodsSaleRankings .van-cell:first-child{
    border-top:1px solid #e5e5e5;
  }
  .goodsSaleRankings [class*=van-hairline]::after{
    border:0;
  }

  .goodsSaleRankings-top{
    position: fixed;
    top:0;
    left:0;
    width:100%;
    background: #fff;
    z-index: 99;
  }
  .goodsSaleRankings .van-popup{
    width:100%;
  }
  .goodsSaleRankings .van-cell{
    text-align: left;
    font-size:12px;
  }
  .goodsSaleRankings-content{
    margin-top:45px;
    padding:5px 0;
    /*background: skyblue;*/
  }
  .pmimg{
    width:30px;
    height:30px;
  }
  .goodsSaleRankings-tuiHuo{
    position: absolute;
    top:10px;
    left:0;
    color:red;
    display: block;
    border:1px solid red;
    border-radius: 2px;
    padding:1px 3px;
    background: #fff;
    -webkit-transform: rotate(-30deg);
    -moz-transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    -o-transform: rotate(-30deg);
    transform: rotate(-30deg);
  }

  .listImg{
    width:60px;height:60px;
  }
  .timeMask{
    width:320px!important;background: #fff!important;border-radius: 5px;overflow: hidden
  }
  .maskBtn{
    width:100%;height:38px;line-height: 38px;
  }
  .zdyMask{
    width:320px!important;height:auto;padding:10px 0;background: #fff!important;border-radius: 5px;
  }
  .stimeMask{
    width:320px!important;height:auto;border-radius: 5px;
  }
  .dcMask{
    width:320px!important;height:440px;padding:5px 0;background: #fff!important;border-radius: 5px;
  }
  .paixuMask{
    width:320px!important;background: #fff!important;border-radius: 5px;
  }

</style>
